<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 内联绑定事件 此时指令的值是javascript表达式(缺点,不能执行复杂的操作) -->
        <div>
            <p>{{a}}</p>
            <button v-on:click="a++">点击</button>
        </div>

        <!-- 类似DOM一级操作 事件触发时执行既定的函数 (函数的第一个参数表示事件对象)-->
        <!-- btn.onclick = addA   (函数的第一个参数表示事件对象) -->
        <div>
            <p>{{a}}</p>
            <button v-on:click="addA">点击</button>
        </div>

        <!-- 事件触发时 执行既定的函数  (1.先触发事件 2.在调用函数,可以在函数调用过程中传入参数) -->
        <!-- btn.onclick = function($event){
              increaseA(2,3,$event)
            } -->
        <div>
            <p>{{a}}</p>
            <button v-on:click="increaseA(2,3,$event)">点击</button>
        </div>

        <hr>
        <h3>v-on简写(v-on: 简写为@)</h3>
        <div>
            <p>{{a}}</p>
            <button @click="a++">点击</button>
        </div>
        <div>
            <p>{{a}}</p>
            <button @click="addA">点击</button>
        </div>
        <div>
            <p>{{a}}</p>
            <button @click="increaseA(2,3,$event)">点击</button>
        </div>
    </div>
</body>
<script>

    // 指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 小结: 指令(Vue中定义的指令  => 标签的属性存在 )
    // 1. 指令是带有 v- 前缀的特殊属性   (v-text  v-html v-pre v-if v-show v-bind v-on v-for v-model)
    // 2. 指令的属性值 预期是单个JavaScript表达式
    // 3. 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

    // 指令用法1:
    // v-指令名="指令值"   例如: v-html="html"

    // 指令用法2:
    // 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
    // v-指令名:参数="指令值"   例如: v-on:click="a++"

    // 常见指令:
    // v-text  将标签内的内容,替换为指定对应的值(text)
    // v-html  将标签内的内容,替换为指定对应的值(html结构 -> 标签和文本 )
    // v-pre   标签内的{{}}双大括号会保留原本的结构,不被Vue应用解析为 文本插值  ({{xxx}}中的内容原样输出)
    // v-if    条件渲染,将指令的表达式的结果作为条件,判断该元素是否被渲染 (内容只会在指令的表达式返回 truthy 值的时候被渲染。)
    // v-show  根据条件判断元素是否显示,如果指令的表达式的结果作为true => 显示(display:block),否则就隐藏(display:none) -> 就结果而言,所有的元素都渲染了,只能是否显示的问题
    // v-on 绑定事件

    // v-bind v-on v-for v-model

    var vm = new Vue({
        el: "#app",
        data: {
            a: 1,
            b: 2,
        },
        methods: {
            addA: function (e) {
                console.log("事件触发", e);
                this.a++;
            },
            increaseA: function (n = 1, m, e) {
                console.log("事件触发", n, m);
                console.log(e);
                this.a += n;
            },
            addB() {
                this.b++;
            }
        },

    })



</script>

</html>